<!--
*@Author: QWP
*@Description: 地区选择
*@Date: 2024-09-27 16:18:30
-->
<template>
  <a-cascader
    v-model:value="value"
    :options="regions" 
    :showSearch="true"
    :fieldNames="{ label: 'name', value: 'id' }"
    :changeOnSelect ="$attrs['changeOnSelect'] || true"
    @change="change">
  </a-cascader>
</template>

<script lang='ts' setup>
defineOptions({
  name: 'u-region-sel'
})
import { ref, reactive, computed, onMounted, watch } from 'vue' 
import { storeToRefs } from 'pinia'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'
// import regions from './final.json'
import regions from './final_no_avenue.json'

const props = defineProps<{
  value: string | any,
}>()

onMounted(() => {
})

const value = ref<string[]>([])
const emits = defineEmits(['update:value', 'change'])

const change = (value, selectedOptions) => {
  emits('update:value', (value || []).join('/'))
  emits('change', value || [], selectedOptions || [])
}

watch(() => props.value, (nval, oval) => {
  value.value = (nval || '').split('/')
}, { immediate: true, deep: true })


</script>

<style lang='scss' scoped>
</style>